<template>
  <div
    class="main"
    :style="
      headerHeight
        ? `top:100px;height:${mainHeight}px`
        : `top:60px;height:${mainHeight}px`
    "
  >
    <div>该页面正在升级中</div>
    <div>敬请期待</div>
  </div>
</template>

<script>
export default {
  name: "UpVipMain",
  data() {
    return {
      // headerHeight的高度是否为100
      headerHeight: true,
      // 内容区高度
      mainHeight: 0,
    };
  },
  mounted() {
    // 设置监听窗口大小事件，当窗口大小改变时回调handleResize方法
    window.addEventListener("resize", this.handleResize);
    if (document.body.clientWidth < 1009) {
      this.headerHeight = false;
    }
    // var header = document.querySelector(".header");
    // console.log(header.style.height); //给bus绑定自定义事件
    // this.mainHeight = document.body.clientHeight - 101;
    this.handleResize();
    this.$bus.$on("getHeaderHeight", (data) => {
      console.log("收到了数据", data);
      if (this.headerHeight != data) {
        this.headerHeight = data;
        console.log(data);
      }
    });
  },
  //销毁之前
  beforeDestroy() {
    //给bus解绑自定义事件,千万别什么都不写,会解绑所有
    this.$bus.$off("getHeaderHeight");
  },
  methods: {
    handleResize() {
      console.log("cc " + document.body.clientHeight);
      if (this.headerHeight) {
        // console.log(document.body.clientHeight);
        this.mainHeight = document.body.clientHeight - 101;
      } else {
        // console.log(document.body.clientHeight);
        this.mainHeight = document.body.clientHeight - 61;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  position: absolute;
  top: 100px;
  // transition: all 200ms ease-in-out 0s;
  width: 100%;
  //   background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  div {
    font-size: 30px;
  }
}
</style>